<!--  -->
<template>
  <a-modal :title="title" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
    <a-form-model ref="ruleForm" :model="model" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="权限名称" ref="permissionName" prop="permissionName">
        <a-input placeholder="请输入权限名称" allowClear v-model="model.permissionName" />
      </a-form-model-item>
      <a-form-model-item label="权限编码" ref="permissionCode" prop="permissionCode"
        v-if="model.permissionType && model.permissionType !== 0">
        <a-input placeholder="请输入权限编码" allowClear v-model="model.permissionCode" :disabled="disabled" />
      </a-form-model-item>
      <a-form-model-item label="访问链接" ref="url" prop="url">
        <a-input placeholder="请输入访问链接" allowClear v-model="model.url" />
      </a-form-model-item>
      <a-form-model-item label="操作类型" ref="actions" prop="actions">
        <a-select placeholder="请选择操作类型" v-model="model.actions" allowClear>
          <a-select-option value="GET"> GET </a-select-option>
          <a-select-option value="POST"> POST </a-select-option>
          <a-select-option value="PUT"> PUT </a-select-option>
          <a-select-option value="DELETE"> DELETE </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="权限描述" ref="permissionDesc" prop="permissionDesc">
        <a-input placeholder="请输入权限描述" allowClear v-model="model.permissionDesc" />
      </a-form-model-item>
      <a-form-model-item label="使用状态" ref="useStatus" prop="useStatus">
        <!-- <a-radio-group name="radioGroup" v-model="model.useStatus">
          <a-radio :value="0"> 启用 </a-radio>
          <a-radio :value="1"> 禁用 </a-radio>
        </a-radio-group> -->
        <a-select placeholder="使用状态" v-model="model.useStatus">
          <a-select-option :value="0"> 启用 </a-select-option>
          <a-select-option :value="1"> 禁用 </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { model, rules } from "./save";
export default {
  name: "DrawerModel",
  props: {
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      api: {
        save: "/admin_server/uc/auth/permission/save", // 添加
        detail: "/admin_server/uc/auth/permission/", // 详情
        update: "/admin_server/uc/auth/permission/update", // 修改
      },
      visible: false,
      model,
      rules,
      labelCol: { span: 5 },
      wrapperCol: { span: 17 },
      confirmLoading: false,
      disabled: false,
      title: undefined,
      id: undefined,
      pid: undefined,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          if (this.model.id) {
            this.$request
              .postRequest2(this.api.update, this.model)
              .then((res) => {
                if (res.success) {
                  this.$message.success("更新成功");
                  this.$emit("handleOk");
                }
                this.confirmLoading = false;
              });
          } else {
            this.$request
              .postRequest2(this.api.save, this.model)
              .then((res) => {
                if (res.success) {
                  this.$message.success("添加成功");
                  this.$emit("handleOk");
                }
                this.confirmLoading = false;
              });
          }
        }
      });
    },
    handleCancel() {
      this.visible = false;
    },
    resetForm() {
      // this.$refs.ruleForm.resetFields();
      Object.keys(this.model).forEach((key) => (this.model[key] = ""));
      this.model.useStatus = 0;
      this.model.permissionType = 2;
      this.model.actions = "GET";
      this.disabled = false;
    },
    init(id, pid, title) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields()
      })
      this.title = title
      if (id) {
        this.confirmLoading = true;
        this.disabled = true;
        this.$request.getRequest1(this.api.detail + id).then((res) => {
          if (res.success) {
            Object.assign(this.model, res.result);
          }
          this.confirmLoading = false;
        });
      } else {
        this.resetForm();
      }
      this.model.pid = pid;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>

</style>